div
    h3.mb-3(translate) Rendering

    .form-line(*ngIf='hostApp.platform !== Platform.Web')
        .header
            .title(translate) Frontend
            .description(translate) Switches terminal frontend implementation (experimental)

        select.form-control(
            [(ngModel)]='config.store.terminal.frontend',
            (ngModelChange)='config.save()',
        )
            option(value='xterm-webgl') xterm (WebGL)
            option(value='xterm') xterm (canvas)

    .form-line
        .header
            .title(translate) Scrollback
            .description(translate) Number of lines kept in the buffer
        input.form-control(
            type='number',
            [(ngModel)]='config.store.terminal.scrollbackLines',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Draw bold text in bright colors
        toggle(
            [(ngModel)]='config.store.terminal.drawBoldTextInBrightColors',
            (ngModelChange)='config.save()'
        )

    .form-line
        .header
            .title(translate) Sixel graphics support (experimental)
            .description(translate) Display images via Sixel escape sequences
        toggle(
            [(ngModel)]='config.store.terminal.sixel',
            (ngModelChange)='config.save(); config.requestRestart()'
        )

div.mt-4
    h3(translate) Keyboard

    .form-line
        .header
            .title(
                translate="Use {altKeyName} as the Meta key",
                [translateParams]='{altKeyName: altKeyName}'
            )
            .description(translate) Lets the shell handle Meta key instead of OS
        toggle(
            [(ngModel)]='config.store.terminal.altIsMeta',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Scroll on input
            .description(translate) Scrolls the terminal to the bottom on user input
        toggle(
            [(ngModel)]='config.store.terminal.scrollOnInput',
            (ngModelChange)='config.save()',
        )

div.mt-4
    h3(translate) Mouse

    .form-line
        .header
            .title(translate) Right click
            .description(*ngIf='config.store.terminal.rightClick == "paste"', translate) Long-click for context menu

        select.form-control(
            [(ngModel)]='config.store.terminal.rightClick',
            (ngModelChange)='config.save()'
        )
            option(ngValue='off', translate) Off
            option(ngValue='menu', translate) Context menu
            option(ngValue='paste', translate) Paste
            option(ngValue='clipboard', translate) Paste if no selection, else copy

    .form-line
        .header
            .title(translate) Paste on middle-click

        toggle(
            [(ngModel)]='config.store.terminal.pasteOnMiddleClick',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Word separators
            .description(translate) Double-click selection will stop at these characters
        input.form-control(
            type='text',
            placeholder=' ()[]{}\'"',
            [(ngModel)]='config.store.terminal.wordSeparator',
            (ngModelChange)='config.save()',
        )

    .form-line(*ngIf='config.store.clickableLinks')
        .header
            .title(translate) Require a key to click links
            .description(translate) When enabled, links are only clickable while holding this key

        select.form-control(
            [(ngModel)]='config.store.clickableLinks.modifier',
            (ngModelChange)='config.save()',
        )
            option([ngValue]='null', translate) No modifier
            option(value='ctrlKey', *ngIf='hostApp.platform !== Platform.macOS') Ctrl
            option(value='altKey') {{altKeyName}}
            option(value='shiftKey') Shift
            option(value='metaKey') {{metaKeyName}}

.mt-4
    h3(translate) Clipboard

    .form-line
        .header
            .title(translate) Copy on select
        toggle(
            [(ngModel)]='config.store.terminal.copyOnSelect',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Copy with formatting
        toggle(
            [(ngModel)]='config.store.terminal.copyAsHTML',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Bracketed paste (requires shell support)
            .description(translate) Prevents accidental execution of pasted commands
        toggle(
            [(ngModel)]='config.store.terminal.bracketedPaste',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Warn on multi-line paste
            .description(translate) Show a confirmation box when pasting multiple lines
        toggle(
            [(ngModel)]='config.store.terminal.warnOnMultilinePaste',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Trim whitespace and newlines
            .description(translate) Remove whitespace and newlines around the copied text
        toggle(
            [(ngModel)]='config.store.terminal.trimWhitespaceOnPaste',
            (ngModelChange)='config.save()',
        )

div.mt-4
    h3(translate) Sound

    .form-line
        .header
            .title(translate) Terminal bell
        .btn-group
            input.btn-check(
                type='radio',
                name='bell',
                [(ngModel)]='config.store.terminal.bell',
                (ngModelChange)='config.save()',
                id='bellOff',
                [value]='"off"'
            )
            label.btn.btn-secondary(for='bellOff')
                span(translate) Off
            input.btn-check(
                type='radio',
                name='bell',
                [(ngModel)]='config.store.terminal.bell',
                (ngModelChange)='config.save()',
                id='bellVisual',
                [value]='"visual"'
            )
            label.btn.btn-secondary(for='bellVisual')
                span(translate) Visual
            input.btn-check(
                type='radio',
                name='bell',
                [(ngModel)]='config.store.terminal.bell',
                (ngModelChange)='config.save()',
                id='bellAudible',
                [value]='"audible"'
            )
            label.btn.btn-secondary(for='bellAudible')
                span(translate) Audible

    .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.bell != "audible" && (config.store.terminal.profile || "").startsWith("wsl")')
        .me-auto(translate) WSL terminal bell can only be muted via Volume Mixer
        button.btn.btn-secondary((click)='openWSLVolumeMixer()', translate) Show Mixer

.mt-4
    h3(translate) Startup

    .form-line(*ngIf='hostApp.platform !== Platform.Web')
        .header
            .title(translate) Auto-open a terminal on app start

        toggle(
            [(ngModel)]='config.store.terminal.autoOpen',
            (ngModelChange)='config.save()',
        )

    .form-line
        .header
            .title(translate) Restore terminal tabs on app start

        toggle(
            [(ngModel)]='config.store.recoverTabs',
            (ngModelChange)='config.save()',
        )

div.mt-4(*ngIf='hostApp.platform === Platform.Windows')
    h3(translate) Windows

    .form-line
        .header
            .title(translate) Set Tabby as %COMSPEC%
            .description(translate) Allows opening .bat files in tabs, but breaks some shells
        toggle(
            [(ngModel)]='config.store.terminal.setComSpec',
            (ngModelChange)='config.save()',
        )
